<template>
  <a-card :bordered="false" title="运行结果区间设置">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper"></div>
    <!-- 操作按钮区域 -->

    <!-- table区域-begin -->
    <a-table bordered :columns="columns" :dataSource="dataSource" :pagination="false">
      <template
        v-for="(col, i) in ['portionSet', 'refValue', 'portionRemark']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <a-tooltip title="必填项" :defaultVisible="false" :overlayStyle="{ color: 'red' }">
          <a-input
            :key="col"
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title"
            @change="(e) => handlerRowChange(e.target.value, record.key, col)"
          />
          <template v-else>{{ text }}</template>
        </a-tooltip>
      </template> 
    </a-table> 
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction, postAction, deleteAction } from '@/api/manage'

export default {
  name: 'UserFormulaPortion',
  components: {},
  data() {
    return {
      description: '算法库管理页面',
      funItems: ['滚动取值', '当日统计', '当月统计', '标准值获取', '日报取值', '日报滚动取值'],
      dataSource: [],
      // 表头
      columns: [
        {
          title: '区间设置',
          dataIndex: 'portionSet',
          key: 'portionSet',
          width: '20%',
          scopedSlots: { customRender: 'portionSet' },
        },
        {
          title: '决策参考值',
          dataIndex: 'refValue',
          key: 'refValue',
          width: '20%',
          scopedSlots: { customRender: 'refValue' },
        },
        {
          title: '处理措施',
          dataIndex: 'portionRemark',
          key: 'portionRemark',
          width: '40%',
          scopedSlots: { customRender: 'portionRemark' },
        },
      ],
      url: {
        list: '/userFormula/userFormula/queryUserFormulaPortionByMainId',
        save: '/userFormula/userFormula/savePortion',
        addPortion: '/userFormula/userFormula/addPortion',
        editPortion: '/userFormula/userFormula/editPortion',
        deletePortion: '/userFormula/userFormula/deletePortion'
      },
      dictOptions: {},
      superFieldList: [],
      loading: false,
    }
  },
  watch: {
    formulaId: {
      handler: function (newVal, oldVal) {
        this.requestData()
      },
    },
  },
  created() {
    if (this.formulaId) {
      this.requestData()
    }
  },
  props: {
    formulaId: {
      type: Number,
    },
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    /** 查询某个tab的数据 */
    requestData() {
      var that = this
      let params = { id: this.formulaId }
      getAction(this.url.list, params)
        .then((res) => {
          let { result } = res
          if (result) {
            if (Array.isArray(result)) {
              result.forEach((element) => {
                element.key = element.id
                element.editable = false
              })
              that.dataSource = result
            } else if (Array.isArray(result.records)) {
              that.dataSource = result.records
            }
          }
        })
        .finally(() => {})
    },
    handlerRowChange(value, key, column) {
      const newData = [...this.dataSource]
      const target = newData.filter((item) => key === item.key)[0]
      if (target) {
        target[column] = value
        this.dataSource = newData
      }
    },
    editRow(key) {
      let target = this.dataSource.filter((item) => item.key === key)[0]
      target.editable = !target.editable
    },
    cancelEditRow(key) {
      let target = this.dataSource.filter((item) => item.key === key)[0]
      target.editable = false
    }, 
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.bsSpan {
  vertical-align: middle;
  display: inline-block;
  width: calc(100% - 0px);
  overflow: hidden;
}
</style>